<script setup>
import { onMounted, ref, watchEffect, computed } from 'vue'
import { message } from 'ant-design-vue'
import {
  getCompanies,
  getBuildings,
  getAmount,
  addProperty
} from '@/api/staging and property/property'

// 使用defineProps方法来接收props
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  }
})

//   获取租户
const entrepreneurList = ref([])
const getCompaniesList = async () => {
  const res = await getCompanies()
  console.log(res)
  entrepreneurList.value = res.data
}

//   获取楼宇
const buildingList = ref([])
const getBuildingsList = async () => {
  const { data } = await getBuildings()
  console.log(data)
  buildingList.value = data
}

// 支付方式列表
const paymentMethodList = ref([
  { name: '微信', value: 1 },
  { name: '支付宝', value: 2 },
  { name: '现金', value: 3 }
])

// 获取金额预算
const getPaymentAPI = async () => {
  const { data } = await getAmount({
    buildingId: addFormData.value.buildingId,
    startTime: addFormData.value.startTime,
    endTime: addFormData.value.endTime
  })
  addForm.value.paymentAmount = data
}

// 最终数据
const addFormData = computed(() => {
  return {
    enterpriseId: addForm.value.enterpriseId,
    buildingId: addForm.value?.buildingId,
    startTime: addForm?.value?.times[0],
    endTime: addForm?.value?.times[1],
    paymentAmount: addForm.value.paymentAmount,
    paymentMethod: addForm.value.paymentMethod
  }
})
// 绑定载体
const addForm = ref({
  buildingId: null,
  times: [null, null],
  paymentMethod: null
})

const addFormRef = ref(null)

//  使用defineEmits方法来定义事件
const emit = defineEmits(['update:showDialog', 'addSuccess'])

const close = () => {
  //  重置表单
  addFormRef.value.resetFields()
  addForm.value = {
    buildingId: null,
    time: [null, null]
  }
  //   向父组件发送事件
  emit('update:showDialog', false)
}
// 表单校验
const addFormRules = ref({
  enterpriseId: [{ required: true, message: '请选择租户', trigger: 'blur' }],
  buildingId: [{ required: true, message: ' 请选择租赁楼宇', trigger: 'blur' }],
  times: [{ required: true, message: '请选择缴费周期', trigger: 'blur' }],
  paymentAmount: [{ required: true, message: '请输入支付金额', trigger: 'blur' }],
  paymentMethod: [{ required: true, message: '请选择支付方式', trigger: 'blur' }]
})

// 金额载体
watchEffect(() => {
  if (addForm.value.buildingId && addForm.value.times[0] && addForm.value.times[1]) {
    getPaymentAPI()
  }
})
//   提交表单
const onFinish = async () => {
  addFormRef.value.validateFields()
  await addProperty(addFormData.value)
  emit('addSuccess')
  message.success('添加成功')
  close()
}

onMounted(() => {
  getCompaniesList()
  getBuildingsList()
})
</script>

<template>
  <a-modal
    @cancel="close"
    :visible="props.showDialog"
    style="width: 580px"
    title="添加账单"
    :footer="null"
  >
    <a-form :model="addForm" ref="addFormRef" :rules="addFormRules" @finish="onFinish">
      <a-row>
        <a-form-item label="选择租户" name="enterpriseId" :label-col="{ span: 24 }">
          <a-select
            v-model:value="addForm.enterpriseId"
            style="width: 100%"
            placeholder="请选择租户"
            :options="entrepreneurList"
            :field-names="{
              label: 'name',
              value: 'id',
              options: 'children',
              validateTrigger: 'blur'
            }"
            :showArrow="false"
          ></a-select>
        </a-form-item>
      </a-row>
      <a-row>
        <a-form-item label="租赁楼宇" name="buildingId" :label-col="{ span: 24 }">
          <a-select
            v-model:value="addForm.buildingId"
            style="width: 100%"
            placeholder="请选择租赁楼宇"
            :options="buildingList"
            :field-names="{ label: 'name', value: 'id', options: 'children' }"
            :showArrow="false"
          ></a-select>
        </a-form-item>
      </a-row>
      <a-row>
        <a-form-item label="缴费周期" name="times" :label-col="{ span: 24 }">
          <a-range-picker
            v-model:value="addForm.times"
            format="YYYY-MM-DD"
            valueFormat="YYYY-MM-DD"
            style="width: 330px"
          />
        </a-form-item>
      </a-row>
      <a-row>
        <a-form-item label="支付金额" name="paymentAmount" :label-col="{ span: 24 }">
          <a-input
            v-model:value="addForm.paymentAmount"
            disabled
            placeholder="请输入支付金额"
          ></a-input>
        </a-form-item>
      </a-row>
      <a-row>
        <a-form-item label="支付方式" name="paymentMethod" :label-col="{ span: 24 }">
          <a-select
            style="width: 100%"
            placeholder="请选择支付方式"
            :options="paymentMethodList"
            :field-names="{ label: 'name', value: 'value', options: 'children' }"
            :showArrow="false"
            v-model:value="addForm.paymentMethod"
          ></a-select>
        </a-form-item>
      </a-row>
      <a-row style="margin-top: 40px; margin-left: 270px">
        <a-space>
          <a-button style="border-radius: 10px" @click="close">取消</a-button>
          <a-button style="border-radius: 10px" type="primary" html-type="submit">确认</a-button>
        </a-space>
      </a-row>
    </a-form>
  </a-modal>
</template>

<style lang="scss">
.ant-modal-header {
  border-bottom: none;
  border-radius: 10px 10px 0 0;
}
.ant-modal-root .ant-modal .ant-modal-content {
  border-radius: 8px;
}
.ant-modal .ant-form {
  padding: 0px 100px;
  .ant-row {
    flex-direction: column;
    margin-bottom: 24px;
  }
  .ant-form-horizontal .ant-form-item-label {
    text-align: left;
  }
}
</style>
